<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="aa" uri="/WEB-INF/tld/ajaxanywhere.tld" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="app"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jsp</title>
<script src="/webjars/jquery/3.5.1/jquery.js"></script>
<script src="/aa.js"></script>
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="/resources/css/dashboard.css" />
</head>
<%@include file="dialogUtil.jsp"%>
<body>
 	<button type="button" id="xzQuery" class="btn btn-primary">选择</button>
	<button type="button" id="btQuery" class="btn btn-primary">查询列表</button>
	<button type="button" id="btQuery2" class="btn btn-primary">查询列表2</button>
	<button type="button" id="btDel" class="btn btn-warning">删除</button>
   <table class="table">
	  <thead>
	    <tr>
	      <th scope="col">#</th>
	      <th scope="col">First</th>
	      <th scope="col">Last</th>
	      <th scope="col">Handle</th>
	    </tr>
	  </thead>
	  <tbody>
	   <aa:zone name="zoneJ">
		  <c:if test="${page !=null && page.list !=null }">
			  <c:forEach var="o" items="${page.list}" varStatus="s">
			  	<tr>
			      <th scope="row">
			      	<input type="checkbox" value="${o.id }" class="ck" >
			      </th>
			      <td colspan="2">${s.count} , id: ${o.id} , name: ${o.name} ,createDate: ${createDate}</td>
			      <td></td>
			    </tr>
			  </c:forEach>
			  <tr>
			  	<td colspan="3"><app:Page id="page1" pg="${page}" pageCallback="goPage" /></td>
			  </tr>
		  </c:if>
	  </aa:zone>
	  
	  </tbody>
</table>
   <form name="zoneJ2Form" id="zoneJ2Form" method="post">
  
   	 <aa:zone2 name="zoneJ2">
		  <c:if test="${page !=null && page.list !=null }">
			  <c:forEach var="o" items="${page.list}" varStatus="s">
			  	<tr>
			      <th scope="row">
			      	<input type="checkbox" value="${o.id }" class="ck" >
			      </th>
			      <td colspan="2">${s.count}zone2 , id: ${o.id} , name: ${o.name} ,createDate: ${createDate}</td>
			      <td></td>
			    </tr>
			  </c:forEach>
			  <tr>
			  	<td colspan="3"><app:Page id="page1" pg="${page}" pageCallback="goPage" /></td>
			  </tr>
		  </c:if>
	  </aa:zone2>
  </form>
 <div class="container">
		<div class="mb-3">
			<label  class="form-label">ID</label> 
			 <input type="text" class="form-control"  name="id" id="id">
		</div>
		<div class="mb-3">
			<label  class="form-label">NAME</label> 
			 <input type="text" class="form-control"  name="name" id="name">
		</div>
		<button type="button" id="btSave" class="btn btn-success">保存</button>
	</div>
 
</body>


<script type="text/javascript">
 
 
 	function indexCallback(obj){
 		alert(obj);
 		dialog.hide()
 	}
	$('#xzQuery').click(function() {
		dialog.show({   
			url : '/j/dialog1?param1=111&callback=indexCallback',
			title : '测试窗口',
			width : 800,
			height : 550,
			scrolling : ''
		}, false);
	});
	
	
	$('#btQuery').click(function() {
		listPage(1)
	});
	$('#btQuery2').click(function() {
		listPage(1);
	});

	function goPage(n) {
		listPage(n)
	}
	
	function listPage(pageNo){
		ajaxAnywhere.getAJAX('/j/list?pageSize=2&pageNo='+pageNo, 'zoneJ');
		var ajaxAnywhere3 = new AjaxAnywhere();
    	//指定刷新区域
    	ajaxAnywhere3.getZonesToReload = function() {
    		return "zoneJ2";
    	};
    	ajaxAnywhere3.getAJAX('/j/list?pageSize=2&pageNo='+pageNo, 'zoneJ2');

	}
	
 
	 $('#btSave').click(function() {
		 let vo=getVo();
		 $http.post('/save/demo',vo).then(res =>{
			 alert(res.success);
		 });
	 });
	 
	 $('#btDel').click(function() {
		 let ids=getIds();
		 $http.post('/demo/deleteByIds',ids).then(res =>{
			 alert(res.success);
		 });
	 });
	 
	function getVo(){
		let vo ={};
		vo.id = $("#id").val();
		vo.name = $("#name").val();
		return vo;
	}
	
	function getIds(){
		let ids = [];
		$('.ck').each((i,e)=>{
			ids.push(e.checked.value);		
		});
		
		return ids;
	}

</script>
<script src="/resources/js/http.js"></script>
<script src="/resources/js/vue.global.prod.js"></script>
<script src="/resources/js/bootstrap.bundle.min.js"></script>
<script src="/resources/js/feather.min.js"></script>
</html>
	
